define(['jquery'], () => {
  class Header {
    constructor () {
      this.init().then(() => {
        this.serarch()
        this.calcCartCount()
      })
    }
    init () {
      return new Promise(resolve => {
        // 把header.html里的DOM结构加载到页面的<header>标签里
        $('header').load('/html/modules/header.html', () => {
          // 这里是异步加载的回调函数，这里代表header.htmlmin加载完成
          // 因此咱们要找header里的元素只能在这里找
          resolve()
        })
      })
    }
    serarch () {
      // 如果事件绑定没效果
      //  在事件里console.log(123)看看有没有，如果有说明事件绑定时成功的，就看事件里的代码有没有问题
      //     如果console.log(123)都没有，说明事件没有绑定成功
      //     1、事件绑定代码写错了
      //     2、在事件之前去console当前元素，看看元素找到没有
      console.log($('#input_search'))
      $('#input_search').on('keyup', function () {
        console.log(123)
        console.log($(this).val())
      })
    }
    calcCartCount () {
      // 无论在项目当中有什么操作影响了购物车总数，都调用这个方法
      // 每一次都是从localStorage里把数据取出来从头算
      let count = 0
      let cart = window.localStorage.getItem('cart')
      if (cart) {
        cart = JSON.parse(cart)
        count = cart.reduce((all, shop) => {
          all += shop.count
          return all
        }, 0)
      }
      $('#shopnum').html(count)
      $('#cart span').html(count)
    }
  }
  return new Header()
})
